<template>
  <div>
    <div class="year-performance">
      <LimitDataCard v-for="(item, index) in allLimitData" :key="index" :limitData="item"></LimitDataCard>
    </div>
    <LimitupTimes :limitUpTimesByMonth="limitUpTimesByMonth" />
    <EarnRateLine :riseData="historyData.riseData"></EarnRateLine>
  </div>
</template>

<script>
import LimitDataCard from './LimitDataCard.vue';
import LimitupTimes from '@/components/draw/LimitupTimes.vue';
import EarnRateLine from '@/components/draw/EarnRateLine.vue';

export default {
  components: {
    LimitDataCard,
    LimitupTimes,
    EarnRateLine,
  },
  props: {
    historyData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      allLimitData: {
        ztcs: {
          title: '涨停次数',
          value: '',
        },
        zthfbl: {
          title: '涨停后封板率',
          value: '',
        },
        crszgl: {
          title: '次日上涨概率',
          value: '',
        },
        crpjzf: {
          title: '次日平均涨幅',
          value: '',
        },
      },
      limitUpTimesByMonth: {},
    };
  },
  methods: {
    /**
     * 获取近一年表现列表数据
     */
    dealHistoryData(historyData) {
      // historyTimes：涨停次数；sealRate：涨停后封板率；nextDayRise：次日上涨概率；riseData[1]：次日平均涨幅；limitUpTimesByMonth：涨停柱状图数据
      this.allLimitData.ztcs.value = historyData?.historyTimes || '--';
      this.allLimitData.zthfbl.value = historyData?.sealRate || '--';
      this.allLimitData.crszgl.value = historyData?.nextDayRise || '--';
      this.allLimitData.crpjzf.value = historyData?.riseData[1] || '--';
      this.limitUpTimesByMonth = historyData?.limitUpTimesByMonth || {};
    },
  },
  mounted() {
    this.dealHistoryData(this.historyData);
  },
  watch: {
    historyData(val) {
      this.dealHistoryData(val);
    },
  },
};
</script>

<style lang="less" scoped>
.year-performance {
  width: 706px;
  padding: 56px 12px 40px 32px;
  display: flex;
  background: #fff;
  white-space: nowrap;
}
</style>
